<template>
  <el-form-item :class="col && 'sc-list-filter-col'" :label="obj.label">
    <template v-if="obj.type === 'date'">
      <el-date-picker
        v-model="valDate"
        type="datetimerange"
        range-separator="~"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        value-format="yyyy-MM-dd HH:mm:ss"
        format="yyyy-MM-dd HH:mm:ss"
        @change="changeDate"
      ></el-date-picker>
    </template>
    <template v-else-if="obj.type === 'select'">
      <el-select v-model="val" :placeholder="obj.placeholder || '请选择'" clearable @input="changeSelect">
        <el-option v-for="item in obj.arr" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </template>
    <template v-else>
      <el-input v-model="val" :placeholder="obj.placeholder || '请输入'" clearable @input="changeInput" @change="emitSearch"></el-input>
    </template>
  </el-form-item>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
    props: {
      obj: {
        type: Object,
        default() {
          return {}
        }
      },
      objKey: {
        type: String,
        default() {
          return ''
        }
      },
      col: {
        type: Boolean,
        default() {
          return false
        }
      },
      immediateSearch: {
        type: Boolean,
        default() {
          return false
        }
      }
    },
    data() {
      return {
        val: '',
        valDate: ['', '']
      }
    },
    computed: {
      ...mapGetters([
        'selectValue',
        'changeValue',
        'departmentValue'
      ])
    },
    watch: {
      departmentValue: function (newValue) {
        if (newValue.name === 'departmentId' && this.objKey === 'jobId') {
          this.val = ''
        }
        if (newValue.name === 'DepartmentId' && this.objKey === 'JobId') {
          this.val = ''
        }
      },
      changeValue: function (newValue, oldValue) {
        this.val = ''
        this.valDate = ''
      },
      selectValue: function (newValue, oldValue) {
        this.val = newValue
      }
    },
    created() {
      this.initItem()
    },
    mounted() {
      if (this.selectValue) {
        this.val = this.selectValue
      }
    },
    beforeDestroy() {
      this.$bus.off('resetItem', this.busResetItem)
    },
    methods: {
      setVal() {
        this.val = ''
      },
      emitSearch() {
        if (this.immediateSearch) {
          this.$emit('search')
        }
      },
      initItem() {
        this.initFromQuery()
        this.$bus.on('resetItem', this.busResetItem)
        this.initFilter()
      },
      initFilter() {
        if (this.obj.type === 'date') {
          this.emitValDate()
        } else {
          this.emitValBase()
        }
      },
      busResetItem() {
        this.val = ''
        this.valDate = ['', '']
        this.initFilter()
      },
      initFromQuery() {
        if (this.obj.type === 'date') {
          const timeStart = this.$route.query[this.obj.start]
          const timeEnd = this.$route.query[this.obj.end]
          if (timeStart && timeEnd) {
            this.valDate = [timeStart, timeEnd]
          }
        } else {
          const validQuery = this.$route.query[this.objKey]
          if (validQuery) {
            this.val = this.obj.isNumber ? parseInt(validQuery) : validQuery
          }
        }
      },
      emitValBase() {
        this.$emit('change', { key: this.objKey, val: this.val })
      },
      emitValDate() {
        let transTime = ['', '']
        if (this.valDate) {
          transTime = this.valDate
        }
        this.$emit('change', { key: this.objKey, val: transTime })
      },
      changeDate() {
        this.emitValDate()
        this.emitSearch()
      },
      changeSelect() {
        this.emitValBase()
        this.emitSearch()
      },
      changeInput() {
        this.emitValBase()
      }
    }
  }
</script>

<style lang="scss" scoped></style>
